<template>
  <div class="detailMap">
    <div class="trackDetail">
      <div class="trackDetailTitle">
        当前告警实时位置详情：x:{{ detailObj.posX }}--y:{{ detailObj.posY }}--名称：{{ detailObj.resourceName }}{{ detailObj.resourceId }}--
        类型：{{ detailObj.type }}--图层：{{ detailObj.mapName }}{{ detailObj.mapId }}--部门{{ detailObj.departmentName }}
      </div>
      <div class="trackDetailBox">
        <div id="map" style="height: 700px; width: 100%" />
      </div>
    </div>
  </div>
</template>

<script>

import { baseUrl } from '@/utils/global.js'
import {
  Load_Map,
  TagStyle,
  _TransMetric,
  _TransPixel,
  _dPR,
  _iMap,
  setMapCenter,
  FenceLayer,
  FenceSource,
  LoadTypeData,
  sendThis
} from '@/utils/iMap.js'
import $ from 'jquery'
import { Vector as VectorLayer } from 'ol/layer.js'
import { Vector } from 'ol/source.js'
import { Circle, LineString, Point, Polygon } from 'ol/geom.js'
import Feature from 'ol/Feature.js'
import { Fill, Stroke, Style, Text, Icon } from 'ol/style.js'

import {
  getListData,
  confirmAlarm,
  getMap,
  getHistoryInfoDetail,
  downloadFile
} from '@/api/cy.js'
export default {
  props: {
    isDetail: {
      type: Boolean,
      default: false
    },
    detailObj: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      currentMapId: null,
      trackData: [],
      progressMax: 0, // 播放进度最大值
      speedIndex: 2
    }
  },
  watch: {
    isDetail(value, oldvalue) {

    }
  },

  created() {

  },
  mounted() {
    console.log('图事')
  },
  destroyed() {
    console.log('告警记录关闭')
  },
  methods: {
    loadMapAndTrack() {
      const self = this
      self.progressIndex = 0 // 防止没有查到数据时，无法置零
      if (!self.currentMapId) {
        return
      }

      if (self.currentMapId) {
        getMap(self.currentMapId).then((res) => {
          const RES = self.responseUse(res)
          if (undefined != RES) {
            Load_Map(
              baseUrl + RES.mapPath,
              RES.mapActualX,
              RES.mapActualY,
              RES.mapPixelX,
              RES.mapPixelY,
              RES.mapPixelX / RES.mapActualX,
              [RES.mapOriginX, RES.mapOriginY]
            )

            getHistoryInfoDetail(self.param).then((res) => {
              const RES = self.responseUse(res)
              if (undefined != RES) {
                if (RES.length > 0) {
                  self.trackData = RES

                  if (self.trackData.length > 1) {
                    self.progressMax = self.trackData.length - 1
                  } else {
                    self.progressMax = 1
                  }
                  console.log(
                    '索引：',
                    self.progressIndex,
                    '最大值：',
                    self.progressMax
                  )

                  //   self.initData()

                //   if ($('.playbtn i').attr('class') === 'al-icon-carplay') {
                //     // 处于暂定状态
                //     $('.playbtn i').attr('class', 'al-icon-carpause')
                //     self.playbtnTooltip = '暂停'
                //   }
                }
              }
            })
          }
        })
      } else {
        console.log('失败')
      }
    }
  }

}
</script>

<style>

</style>
